<!DOCTYPE html>

<html>
  <head>
    <title>Presentation</title>

    <meta charset='utf-8'>
    <script
      src='http://html5slides.googlecode.com/svn/trunk/slides.js'></script>
  </head>

  <style>
  .two-column {
    -webkit-column-count: 2;
    -webkit-column-rule: 0;
    -moz-column-count: 2;
    -moz-column-rule: 0;
    column-count: 2;
    column-rule: 0;
  }
  </style>

  <body style='display: none'>

    <section class='slides layout-regular template-default'>
      <article class='biglogo'>
      </article>



<!----------------------------------
    Maps API v3
---------------------------------->


<article> 
    <img style="float:right; align:top; height:42%" src='images/maps_api-hires.jpg'>
  <h1> 
      Google Geo APIs
      <br> </h1>
      
    <p> 
      Carlos Cuesta<br>
	  ccuesta@google.com
      <br> <br>
      June 21, 2011
    </p> 
  </article> 


<article>
  
  <h1>Why Google Maps for advertising?</h1>
</article>

<article class='fill'> 
  <h3> 
    <dd>Maps are highly engaging
  </h3> 
  <p> 
    <img src='images/obamamaps.jpg'> 
  </p> 
</article>


<article class='fill'>
<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=+Via+Santo+Stefano,+&amp;sll=44.495403,11.342869&amp;sspn=0.097223,0.154324&amp;ie=UTF8&amp;hq=Via&amp;hnear=Via+Santo+Stefano,+24,+40125+Bologna,+Emilia+Romagna,+Italy&amp;layer=c&amp;cbll=44.493651,11.346679&amp;panoid=eiIRz5BLysnAuhld7gqo4w&amp;cbp=13,292.8,,1,17.69&amp;ll=44.48501,11.351109&amp;spn=0.019228,0.048237&amp;z=14&amp;output=svembed"></iframe><br />
<h3> 
   <dd>Maps are emotional
 </h3>
</article>

<article class='fill'> 
	   
	<iframe src='http://streetartview.com/e/MzM2'></iframe> 
	
</article>


<article class='fill'> 
	   
	<iframe src='http://www.googleartproject.com/museums/vangogh'></iframe> 
	
</article>


<article class='fill'> 
	   
	<iframe src='http://robotflaneur.com/sanfrancisco/'></iframe> 
	
</article>

<article class='fill'> 
	   
	<iframe src='http://trending.seetorontonow.com/'></iframe> 
	
</article>


<article class='fill'> 
	   
	<iframe src='http://worldcup.housebling.org.uk/'></iframe> 
	
</article>

<article class='fill'> 
    
    <img src='images/ytjapan.png'> 

</article>

</article>


<article class='fill'> 
       <h3> 
         Tokyo Places Movie
       </h3> 
<iframe width="560" height="349" src="http://www.youtube.com/embed/Alb36UHaPWo" frameborder="0" allowfullscreen></iframe> 

</article>



<article class='fill'> 
	   
	<iframe src='http://www.flushtracker.com/'></iframe> 
	
</article>

<article class='fill'> 
	   
	<iframe src='http://projects.nytimes.com/census/2010/map?smid=tw-nytimes/'></iframe> 
	
</article>


<article class='fill'> 
	   
	<iframe src='http://voeux2011.digitas.fr/nissan/2517307660958798627/51622460713794274374'></iframe> 
	
</article>

<article> 
      <h1> 
        The Nuts and Bolts
      </h1> 
</article>


<article>
  <h3>
    Maps API v3: Features
  </h3>

  <p class="two-column">
    Map<br>
    SSL Support<br>
    Road, Terrain, Satellite and Hybrid maps<br>
    <span class="blue">Satellite and 45&deg; Imagery</span><br>
    <span class="blue">Styled Maps</span><br>
    Custom Tile Support<br>
    <span class="blue">Markers</span><br>
    Info Windows<br>
    Polylines + Polygons<br>
    Ground overlays<br>
    Custom overlays<br>
    <span class="blue">Layers</span><br>
    <span class="blue">Draggable Directions</span><br>
    <span class="blue">Street View</span><br>
    Directions service<br>
    Geocoding service<br>
    Elevation service<br>
    <span class="blue">Libraries</span>
  </p>
</article>

<article>
  <h3>
    45&deg; imagery
  </h3>
  <iframe src='samples/45deg.html' style="height:450px;;border:0"></iframe>
</article>

<article>
  <h3>
    Street View
  </h3>
  <ul>
    <li>HTML/JavaScript implementation</li>
    <li>Supports Overlays</li>
    <li>Supports Custom Imagery</li>
    <li>Street View Data Service</li>
  </ul>

</article>

<article>
  <h3>
    Street View: Overlays
  </h3>
  <iframe src="samples/streetview-overlays.html" style="height:450px;;border:0"></iframe>
</article>

<article>
  <h3>
    Street View: Custom Street View
  </h3>
  <iframe src="samples/streetview-custom.html" style="height:450px;;border:0"></iframe>
  <div class="source">
  </div>
</article>




<article>
  <h3>
    Places: Autocomplete
  </h3>
  <iframe src="http://code.google.com/apis/maps/documentation/javascript/examples/places-autocomplete.html" style="height:450px;border: 0"></iframe>
</article>






<article>
  <h3>Fusion Tables</h3>
  <ul>
    <li>Tool for storing, sharing and visualizing large amounts data</li>
    <li>Cloud based database</li>
    <li>Integration with the Maps API</li>
    <li>Spatial query support</li>
    <li>SQL-like query syntax and API</li>
  </ul>
</article>

<article>
  <h3>Fusion Tables</h3>
  <iframe src="samples/fusiontableslayer.html" style="height:450px;border: 0"></iframe>
</article>

<article>
  <h3>Fusion Tables</h3>
  <iframe src="http://google-io-preso.googlecode.com/svn/trunk/map_ranged.html" style="height:450px;border: 0"></iframe>
</article>

<article class='fill'> 
	   
	<iframe src='http://gmaps-samples.googlecode.com/svn/trunk/fusiontables/hotpot_mar1.html'></iframe> 
	
</article>

<article class='fill'> 
	   
	<iframe src='http://gmaps-samples.googlecode.com/svn/trunk/fusiontables/hotpot_mar12.html'></iframe> 
	
</article>


<article>
  <h3>
    High-resolution static maps
  </h3>
  <ul>
    <li>
      Maps rendered with more detail
      <ul>
        <li>Advanced mobile devices</li>
        <li>Printing</li>
      </ul>
    </li>
    <li>
      Scale up from normal size with 2x or 4x factor
      <ul>
        <li>Add <code>scale</code> to URL, pixel size changes automatically</li>
        <li>Can also specify scale factor of custom icons</li>
      </ul>
    </li>
  </ul>
  <pre>http://maps.googleapis.com/maps/api/staticmap
    ?sensor=false
    &amp;size=512x512
    &amp;center=Sydney
    &amp;scale=2</pre>
</article>

<article class='fill'>
  <h3>
    High-resolution example: 1x scale
  </h3>
  <p>
    <!-- http://faulkner.mtv.corp.google.com:4884/maps/api/staticmap?skip_auth&size=1100x700&center=Sydney&zoom=15&scale=1 -->
    <img src='images/scale-1.png'>
  </p>
</article>

<article class='fill'>
  <h3>
    High-resolution example: 2x scale
  </h3>
  <p>
    <!-- http://faulkner.mtv.corp.google.com:4884/maps/api/staticmap?skip_auth&size=550x350&center=Sydney&zoom=15&scale=2 -->
    <img src='images/scale-2.png'>
  </p>
</article>

<article>
  <h3>
    Custom map styles
  </h3>
  <ul>
    <li>Customize the presentation of map images
      <ul>
        <li>Focus on particular data</li>
        <li>Match your branding</li>
      </ul>
    </li>
    <li>Simply add <code>style</code> parameters</li>
  </ul>
</article>

<article class='fill'>
  <h3>
    Custom style example: before
  </h3>
  <p>
    <img src='images/styled-map-before.png'>
  </p>
</article>

<article class='fill'>
  <h3>
    Custom style example: after
  </h3>
  <p>
    <img src='images/styled-map-after.png'>
  </p>
</article>


<article> 
      <h1> 
        Thanks 
      </h1> 
	  <h3>
		<br><br>
		<dd>ccuesta@google.com
		<br><br>
		<dd>@baconbreakfast
     </h3> 
</article>





  </section>

  </body>
</html>
